<template>
  <div id="video-con">
    <player :movie="movie" v-if="movieShow"></player>
    <div v-else @click="openPlayer()" v-for="item in videoList" :key="item.id">
      <video-1  :item="item"></video-1>
<!--      <rec-box1></rec-box1>-->
    </div>

  </div>
</template>

<script>
import Video1 from "@/components/conmmon/Video-1";
import RecBox1 from "@/components/content/RecBox1";
import Player from "@/components/conmmon/Player";
export default {
  name: "index",
  components: {Player, RecBox1, Video1},
  data(){
    return{
      movieShow:false,
      movie:'https://warm-1259260474.cos.ap-nanjing.myqcloud.com/video/%E6%8F%A1%E6%A7%BD%20%E9%A9%AC%E9%87%8C%E5%A5%A5%E4%B8%8E%E7%8C%AB%E9%87%8C%E5%A5%A5%20%E8%81%94%E5%90%88%E5%AF%B9%E6%8A%97%E2%80%9C%E9%BE%99%E7%8F%A0%E2%80%9D%E5%8F%8D%E6%B4%BE%E3%80%8A%E7%AC%AC%E4%B8%89%E9%9B%86%E3%80%8B.flv',
      videoList:[
        {id:1,title:'时间是是什么',userName:'风云大师'},
        {id:2,title:'风水轮流转?',userName:'风云大师'},
        {id:3,title:'风水轮流转?',userName:'风云大师'},
        {id:4,title:'风水轮流转?',userName:'风云大师'},
        {id:5,title:'风水轮流转?',userName:'风云大师'},
        {id:6,title:'风水轮流转?',userName:'风云大师'},
        {id:7,title:'风水轮流转?',userName:'风云大师'},
        {id:8,title:'风水轮流转?',userName:'风云大师'},
        {id:9,title:'风水轮流转?',userName:'风云大师'},
        {id:10,title:'风水轮流转?',userName:'风云大师'},
        {id:11,title:'风水轮流转?',userName:'风云大师'},
        {id:12,title:'风水轮流转?',userName:'风云大师'},
        {id:13,title:'风水轮流转?',userName:'风云大师'},
        {id:14,title:'风水轮流转?',userName:'风云大师'},
        {id:15,title:'风水轮流转?',userName:'风云大师'},
        {id:16,title:'风水轮流转?',userName:'风云大师'},
        {id:17,title:'风水轮流转?',userName:'风云大师'},
        {id:18,title:'风水轮流转?',userName:'风云大师'},
        {id:19,title:'风水轮流转?',userName:'风云大师'},
        {id:20,title:'风水轮流转?',userName:'风云大师'},
        {id:21,title:'风水轮流转?',userName:'风云大师'},
        {id:22,title:'风水轮流转?',userName:'风云大师'},
      ]
    }
  },
  methods:{
    openPlayer(){
      this.movieShow=true
      this.$store.commit("SET_PLAYER")
    }
  }
}
</script>

<style lang="stylus" scoped>

#video-con
  //background #07c160
  display grid
  gap .6rem .5rem
  grid-template-columns: repeat(5, 1fr);
  width 100%
  height auto
  min-height 800px

</style>
